<template>
  <section>
    <div class="model mymanage">
      <img :src="IMGBASE64.WODEXINXI2X" class="pink">
      <span class="title">我的信息</span>
      <i class="xiugai el-icon-edit" @click="changeDis()" v-show="icon"></i>
      <div class="body">
				<div class="content">
					<div class="left">
						<span>姓名：</span>
						<span>{{name}}</span>
					</div>
					<div class="right">
						<span>身份：</span>
						<span>{{id}}</span>
					</div>
					<div class="left">
						<span>身份证号：</span>
						<span>{{idNo}}</span>
					</div>
					<div class="right">
						<span>手机号：</span>
						<input type="text" :class="{'text1' : dis1, 'text2' : dis2}" v-model="phone" :disabled="notInput">
					</div>
					<div class="left">
						<span>年级号：</span>
						<span>{{grade}}</span>
					</div>
					<div class="right">
						<span>任教学科：</span>
						<span>{{subject}}</span>
					</div>
					<div class="bottom">
						<span>现住地址：</span>
						<input type="text" :class="{'text1' : dis1, 'text2' : dis2}" v-model="homeAddr" :disabled="notInput">
					</div>
				</div>
      </div>
    	<div class="bto-btn">
    		<button class="btn btn-danger" @click="keepDis" v-show="button">保存</button>
    	</div>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      name: '欧阳俊逸',
      id: '校长',
      idNo: '444444444444444444',
      phone: '88888888888',
      grade: '五年级',
      subject: '体育',
      homeAddr: '中国',
      notInput: true,
      dis1: true,
      dis2: false,
      button: false,
      icon: true
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.$http.post(this._httpUrl + 'teacherInfo/myManage', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.formData = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    changeDis () {
      this.notInput = !this.notInput
      this.dis1 = !this.dis1
      this.dis2 = !this.dis2
      this.button = !this.button
      this.icon = !this.icon
    },
    keepDis () {
      this.notInput = !this.notInput
      this.dis1 = !this.dis1
      this.dis2 = !this.dis2
      this.button = !this.button
      this.icon = !this.icon
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
	.mymanage{
		.body{
		  .content{
		  	width: 80%;
		  	span{
		  		font-size: 16px;
		  		color: #222;
		  	}
		  	.left{
		  		width: 40%;
		  		display: inline-block;
		  		padding: 10px 0;
		  	}
		  	.right{
		  		width: 40%;
					display: inline-block;
					padding: 10px 0;
					margin-left: 5%;
		  	}
		  	.bottom{
		  		padding: 10px 0;
		  		.text{
		  			width: 68%;
		  		}
		  	}
		  	.text1{
		  		background: #fff;
		  		border: 0;
		  		font-size: 16px;
		  		color: #222;
		  	}
		  	.text2{
		  		border: 0;
		  		border-bottom: 1px solid #D7D7D7;
		  		font-size: 16px;
		  		color: #222;
		  	}
		  }
		}
	}
	.bto-btn{
		text-align: center;
		padding: 15px 0;
	}

	.xiugai{
		position: absolute;
		right: 20px;
	}
</style>
